<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度换肤</title>
<style type="text/css">
	*{padding:0px;margin:0px;}
	div{width:1300px;height:180px;position:relative;margin:0 auto;}
	#picture{width:1300px;height:1000px;background:url(images/1.jpg) no-repeat;display:block;}
	ul{text-align:center;width:1300px;height:180px;list-style:none;position:absolute;top:0px;background:#FFF;opacity:0.7;}
	li{display:inline-block;margin:0 10px;text-align:center;width:200px;height:160px;}
	li img{width:200px;height:150px;}
</style>
<script type="text/javascript">
	window.onload=function(){
		function fn(a,number){
			var picture=document.getElementById("picture");	
			var oLi=document.getElementById(a);	
			oLi.onmouseover=function(){
				picture.src="images/"+number+".jpg"	;
			}
		}
		for(var i=1;i<=5;i++){
			fn("li"+i,i);
		}
	}
</script>
</head>

<body>
	<div>
    	<img src="images/3.jpg" id="picture"/>
    	<ul>
        	<li id="li1"><img src="images/1.jpg" /></li>
            <li id="li2"><img src="images/2.jpg"/></li>
            <li id="li3"><img src="images/3.jpg"/></li>
            <li id="li4"><img src="images/4.jpg"/></li>
            <li id="li5"><img src="images/5.jpg"/></li>
        </ul>
    </div>
</body>
</html>
